<template>
    <el-form label-width="auto" :inline="true">
        <div style="margin-top: 20px;">
            <el-form-item>
                <el-button @click="open(null)">新增房号</el-button>
                <el-button @click="updromStates(0)">批量下架</el-button>
                <el-button @click="delnums">批量删除</el-button>
                <el-button @click="importFn">批量导入</el-button>
                <input type="file" @change="importFn">
                // 这地方在哪
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="condtion.roomNumberStatues" style="width: 90px;" @change="listnum" clearable>
                    <el-option label="上架" :value="true"  />
                    <el-option label="下架" :value="false"  />
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-select v-model="condtion.roomTypeName" style="width: 100px;" @change="listnum" clearable>
                    <el-option v-for="item in romlist" :key="item.id" :label="item.roomTypeName" :value="item.roomTypeName" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input style="width: 120px;" v-model="condtion.roomNum" placeholder="房型名称" class="input-with-select">
                    <template #append>
                        <el-button @click="listnum()" :icon="Search" />
                    </template>
                </el-input>
            </el-form-item>
        </div>
    </el-form>
    <el-table ref="tableRef" :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="roomTypeName" label="房型名称" />
        <el-table-column prop="roomNum" label="房号" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column prop="remark" label="备注" width="160" />
        <el-table-column prop="roomNumberStatues" label="状态" >
            <template v-slot="scope">
                <span v-if="scope.row.roomNumberStatues">上架</span>
                <span v-else>下架</span>
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
            <template v-slot="scope">
                <el-button v-if="scope.row.roomNumberStatues" size="small" @click="updromState(scope.row.id,scope.row.roomNumberStatues)">下架</el-button>
                <el-button v-else size="small" @click="updromState(scope.row.id,scope.row.roomNumberStatues)">上架</el-button>
                <el-button size="small" @click="open(scope.row)">编辑</el-button>
                <el-button size="small" @click="delnum(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
     <el-dialog v-model="logic.isOpen" :title="logic.title" width="500">
        <el-form :model="form" label-width="140">
             <el-form-item label="适用房型">
                <el-select v-model="form.roomTypeId">
                    <el-option v-for="item in romlist" :key="item.id" :label="item.roomTypeName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="房号">
                <el-input v-model="form.roomNum"/>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="form.sort"/>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="form.roomNumberStatues">
                    <el-radio :value="true">上架</el-radio>
                    <el-radio :value="false">下架</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" placeholder="备注不超过9个字符" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="logic.isOpen = false">取消</el-button>
                <el-button type="primary" @click="addnum">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { getroomType,addroomnum,listroomnum,updroomnum,updromnumstate,updromnumstates,delroomnum,delroomnums } from '@/api/index';
import axios from 'axios';
import { ElMessage,ElMessageBox,ElTable } from 'element-plus';

const condtion = reactive({
    roomTypeName: "",
    roomNum: "",
    roomNumberStatues:null
})

const form = reactive({
    id: "",
    roomTypeId: "",
    roomTypeName: "",
    roomNum: "",
    sort: null,
    remark: "",
    roomNumberStatues: null,
    isDeleted: false
})

const logic = reactive({
    isOpen: false,
    title: "",
    isAdd:false
})

const open = (row:any) => {
    if (row == null) {
        logic.isOpen = true;
        logic.title = "新增";
        logic.isAdd = true;
        form.id = "";
        form.roomTypeId= "";
        form.roomTypeName= "";
        form.roomNum= "";
        form.sort= null;
        form.remark= "";
        form.roomNumberStatues = null;
        form.isDeleted = false;
    }
    else {
        logic.isOpen = true;
        logic.title = "编辑";
        logic.isAdd = false;
        // console.log(row);
        form.id = row.id;
        form.roomTypeId = row.roomTypeId;
        form.roomTypeName = row.roomTypeName;
        form.roomNum = row.roomNum;
        form.sort =  row.sort;
        form.remark = row.remark; 
        form.roomNumberStatues = row.roomNumberStatues;
        form.isDeleted=row.isDeleted;
    }
}

const addnum = () => {
    if (logic.isAdd == true) {
        addroomnum(form).then(res => {
            if(res.code == 200){
                logic.isOpen = false;
                ElMessage.success("新增成功");
                listnum();
            }
            else {
                logic.isOpen = false;
                ElMessage.error("新增失败");
            }
        })
    }
    else {
        updroomnum(form,form.id).then(res => {
            if(res.code == 200){
                logic.isOpen = false;
                ElMessage.success("修改成功");
                listnum();
            }
            else {
                logic.isOpen = false;
                ElMessage.error("修改失败");
            }
        })
    }
}

const tableData = ref<any>([]);
const listnum = () => {
    const roomTypeName = condtion.roomTypeName;
    const roomNum = condtion.roomNum;
    const roomNumberStatues = condtion.roomNumberStatues;
    listroomnum(roomTypeName, roomNum, roomNumberStatues).then(res => {
        tableData.value = res.data;
    })
}

//单个上架下架
const updromState = (id: any, name: boolean) => {
    console.log(id);
    updromnumstate(id).then(res => {
        if(res.code == 200&&name==false){
            ElMessage.success("上架成功");
            listnum();
        }
        else if(res.code == 200&&name==true){
            ElMessage.success("下架成功");
            listnum();
        }
        else {
            ElMessage.error("修改失败");
        }
    })
}

//批量上架下架
const updromStates = (value: number) => {
  // 获取选中的行数据
  const selectedRows = tableRef.value?.getSelectionRows()
  if (!selectedRows || selectedRows.length === 0) {
    ElMessage.error('请选择要更新的商品')
    return
  }
  // 提取要更新的商品ID
  const ids = selectedRows.map((row: any) => row.id) // 假设数据中有id字段
  updromnumstates(ids, value).then(res => {
    if (res.code == 200) {
      ElMessage.success("更新成功")
        listnum();
    }
    else {
      ElMessage.error("更新失败")
    }
  })

}


const romlist=ref<any>([]);
const listroomType = () => {
    getroomType().then(res => {
        romlist.value = res.data;
        // console.log(romlist.value);
    })
}

const delnum = (id:any) => {
    ElMessageBox.confirm(
    '确定要删除该条数据吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        delroomnum(id).then(res => {
            if(res.code == 200){
                ElMessage.success("删除成功");
                listnum();
            }
            else {
                ElMessage.error("删除失败");
            }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
const tableRef = ref<InstanceType<typeof ElTable>>()
//批量删除
const delnums = () => {
  ElMessageBox.confirm(
    '确定要删除吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 获取选中的行数据
      const selectedRows = tableRef.value?.getSelectionRows()
      if (!selectedRows || selectedRows.length === 0) {
        ElMessage.error('请选择要删除的商品')
        return
      }
      // 提取要删除的商品ID
      const ids = selectedRows.map((row: any) => row.id) // 假设数据中有id字段

      delroomnums(ids.toString()).then((res: any) => {
        if (res.code == 200) {
            ElMessage.success("删除成功");
            listnum();
        }
        else {
          ElMessage.error("删除失败")
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

//批量导入
//给我个导入文件的代码模板
const a = ref<any>([])
//导入
const changeF = (e:any)=>{
    a.value = e.target.files[0]
}
// 

const importFn = (e:any)=>{
    a.value = e.target.files[0]
  let formData = new FormData();
  formData.append('file',a.value)
  axios({
    url:'https://localhost:44388/api/app/room-num/import-excel',
    method:'post',
    data:formData
  })
  .then(res=>{
    console.log(res);
    if(res.data.code == 200){
        ElMessage.success("导入成功");
      listnum();
    }else{
      ElMessage.error("导出失败");
      return
    }
    
  })
  .catch(err=>{
    console.log(err);
    
  })
}


onMounted(() => {
    listnum();
    listroomType();
})
</script>


<style>

</style>